<template>
  <div class="app-container ad-container">
    <el-form ref="mntForm" :model="formModel" label-width="0">
      <el-form-item label="" prop="list">
        <div class="items ad-items">
          <div v-for="(item, index) in formModel.list" :key="index" class="item">
            <div class="ad-warp">
              <div class="img">
                <hey-image class="max-image" :img-url="item.adUrl" :large-url="item.adUrl" :group="index + ''" />
              </div>
              <p class="img-name ov-line" :title="item.adName">
                {{ item.adName || '无' }}
              </p>
              <div class="ad-upload">
                <hey-copper
                  v-if="hasPermission(['operate'])"
                  class="dib"
                  :box-width="1280"
                  :box-height="1280"
                  :cut-width="1080"
                  :cut-height="1280"
                  :extra-param="{type: 'deviceAd'}"
                  :item="item"
                  url-field="adUrl"
                  name-field="adName"
                  :label="item.adName ? '替换' : '上传'"
                  @handleSuccess="handleSuccess"
                />
                <!--<hey-upload :extra-param="{type: 'deviceAd'}" :item="item" url-field="adUrl" name-field="adName" :btn-text="item.adName ? '替换' : '上传'" @handleSuccess="handleSuccess" />-->
                <el-button v-if="hasPermission(['operate'])" v-show="item.adName" plain size="small" @click="remove(item)">删除</el-button>
              </div>

              <!--<el-button type="primary">{{item.adName ? '替换' : '上传'}}</el-button>-->
            </div>
            <!--<hey-image-viewer class="dib" :item="item" url-field="adUrl" name-field="adName" @handleSuccess="handleSuccess" @remove="remove" />-->
          </div>
        </div>
      </el-form-item>
      <p class="tip">
        请上传尺寸 1080*1280、4M以内大小的jpg/jpeg/png图片
      </p>
      <!--<div class="text-center">
        <el-button type="primary" @click="handleSubmit()">保存</el-button>
      </div>-->
    </el-form>
  </div>
</template>

<script>
import ad from './mixins/ad'

export default {
  name: 'Ad1List',
  components: {},
  mixins: [ad],
  props: {},
  data() {
    return {}
  },
  computed: {
  },
  created() {
    this.loadData()
  },
  mounted() {
  },
  methods: {
    loadData() {
      this.adType = '1'
      this.formModel.list = []
      for (let i = 0; i < 5; i += 1) {
        const adObj = { ...this.adObj }
        adObj.adType = this.adType
        this.formModel.list.push(adObj)
      }
      const adType = this.adType
      const param = {
        adType
      }
      this.get('/deviceAd/selectAdList', param).then(ret => {
        if (ret) {
          ret.forEach((item, index) => {
            this.formModel.list.splice(index, 1, item)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .tip {
    text-align: center;
    color: red;
  }

  .items {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;

    .item {
      &:not(:last-child) {
        margin-right: 20px;
      }
    }
  }

  .ad-items {
    .item {
      .ad-warp {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }

  .ad-upload {
    text-align: center;
  }

  .img-name {
    max-width: 100px;
    height: 36px;
    margin: 0 auto;
    text-align: center;
  }

  .img {
    width: 240px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
<style lang="scss">
  .ad-container {
    .items {
      .dubu-uploader {
        /*height: 220px;
        width: 220px;*/
      }
    }
  }
</style>
